<template>
  <div class="topic-el">
    <!-- 用户信息区域 -->
    <div class="pub-user-name">
      <van-image round width="40px" height="40px" :src="url" class="pub-avtar" />
      <div>
        <span class="pub-color-32">用户昵称</span>
        <span class="pub-font-10 pub-color-96">&nbsp;发布了视频</span>
        <div class="pub-font-10 pub-color-96">3月21日</div>
      </div>
      <slot name="right"></slot>
    </div>
    <div class="pub-color-32 pub-instro">[种草]卡就是卡卡手机卡手机卡监控数据库</div>
    <!-- 视频模板 -->
    <topic-audio v-if="genre == 1" class="common-audio" />
    <!-- 图片文案模板 -->
    <topic-card v-else />
  </div>
</template>

<script>
import { ref } from '@vue/runtime-core'
// 自定义组件引入
import TopicCard from './topicCard.vue'
import TopicAudio from './topicAudio.vue'
export default {
  name:'TopicEl',
  /**
   * @param genre 模板类型 1:卡片  2:视频
   * @param isFocus 是否需要关注按钮
   * */
  props: {
    genre: {
      type: Number,
      default: 1
    },
    isFocus: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const url = ref('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png')
    return {
      url
    }
  },
  components: {
    TopicCard,
    TopicAudio
  }
}
</script>

<style scoped lang='scss'>
@import '../../style/mixin.scss';
@import '../style.scss';

.pub-avtar {
  margin-right: 4px;
}
.topic-el {
  padding: 16px 16px 20px 16px;
  .pub-user-name {
    display: flex;
  }
}
.pub-instro {
  padding: 10px 6px;
  font-weight: 400;
  line-height: 24px;
}
</style>